<template>
	<w-container class="container" :loading="loading">
		<w-navbar :placeholder="false" title='升级藏品' :bgColor="bgColor" :opacity="opacity" :leftIconSize="32"
			:leftIcon="opacity>0.8?'arrow-left-back':'arrow-left-back'" :titleStyle="{color:opacity>0.8?'#222':'#fff'}"
			:product="{name:'升级藏品'}">
			<template #right>
				<view @click="ruleShow = !ruleShow" class="font-color-white font-size-12">规则</view>
			</template>
		</w-navbar>
		<div class="dial zhuan-out-box">
			<!-- 主指针 -->
			<div class="pointer" :style="pointerStyle"></div>
			<!-- 多层残影 -->
			<div v-for="(trail, index) in trails" :key="index" class="trail" :style="getTrailStyle(trail)"></div>
			<!-- 中心点 -->
			<div class="center"></div>
			<view class="probability-box">{{ Object.keys(selectItemInfo).length?info.success_rate1:0 }}%</view>
			<view class="flex flex-ai-center is-open-box">
				<view class="font-w-500 font-size-14 font-color-white mr-8">开动画</view>
				<u-switch v-model="isOpenAnimation" space="2" activeColor="#B9D8F4" inactiveColor="#3D6CBA"></u-switch>
			</view>
			<image @click="toRecord" class="shengji-record-btn" :src="$ossUrl + '/static/bg/shengji-record-btn.png'" mode="heightFix"></image>
			<!-- 控件 -->
			<!-- <div class="controls">
				<label>速度（秒/圈)
					<input type="number" v-model.number="speed" step="0.1" min="0.1" />
				</label>
				<button @click="toggle">{{ running ? '暂停' : '开始' }}</button>
			</div> -->
		</div>
		<view class="plr-16">
			<view class="add-box flex flex-ai-center flex-js-sa">
				<view @click="selectCurrentCollections" class="flex flex-dir-col flex-ai-center">
					<view class="add-item-bg flex flex-ai-center flex-js-center">
						<w-icon v-if="!Object.keys(selectItemInfo).length" name="shengji-add" :size="56/2"></w-icon>
						<w-image :src="selectItemInfo.main_image" :width="160/2" :height="160/2" style="position: relative;" radius="10"></w-image>
					</view>
					<view class="font-color-white font-w-500 font-size-14 mt-12">添加升级藏品</view>
					<view class="xuanz-btn">选择藏品</view>
				</view>
				<image class="add-right" :src="$ossUrl + '/static/bg/shengji-right.png'"></image>
				<view class="flex flex-dir-col flex-ai-center">
					<view class="add-item-bg flex flex-ai-center flex-js-center">
						<w-image v-if="Object.keys(selectItemInfo).length" :src="info.rule_hc_result && info.rule_hc_result.length && info.rule_hc_result[0].info && info.rule_hc_result[0].info.main_image" :width="160/2" :height="160/2" style="position: relative;" radius="10"></w-image>
					</view>
					<view class="font-color-white font-w-500 font-size-14 mt-12">升级目标藏品</view>
					<view class="yulan-btn">预览藏品</view>
				</view>
			</view>
			<u-gap height="64rpx"></u-gap>
			<w-image v-if="shenjiType == 1" @click.native="shenjiShow" src="/static/bg/confirm-sure-btn.png" width="100%" mode="widthFix"></w-image>
			<view v-else class="empty-btn" @click.native="shenjiShow">
				<w-image src="/static/bg/shenji-enpty-btn.png" width="100%" mode="widthFix"></w-image>
				<view v-if="shenjiType == 2" class="empty-btn-text">升级中...</view>
				<view v-if="shenjiType == 3" class="empty-btn-text">升级成功</view>
				<view v-if="shenjiType == 4" class="empty-btn-text">升级失败 再次升级</view>
			</view>
		</view>
		<u-popup :show="selectShow" @close="selectShow = false" mode="bottom">
			<view class="pa-15">
				<view class="font-size-20 font-color-222 font-w-500 mb-24">{{ info.rule_text && info.rule_text.length && info.rule_text[0].collectionInfo && info.rule_text[0].collectionInfo[0].name }}</view>
				<scroll-view scroll-y="true" style="height: 60vh;">
					<view @click="selectItemCollect(item)" v-for="(item,index) in userHaveCollectionList" :key="item.id" class="flex flex-ai-center flex-js-sb mb-24">
						<view class="flex flex-ai-center">
							<w-image :src="item.main_image" :width="98/2" :height="98/2" radius="8"></w-image>
							<view class="flex flex-dir-col ml-12">
								<view class="flex flex-ai-center">
									<view>#{{ item.collection_code }}/{{ item.total_num }}</view>
								</view>
								<view class="font-size-10 mt-4" style="color: #727072;">持仓天数{{ item.day }}</view>
							</view>
						</view>
						<w-button style="height: 56rpx;width: 118rpx;border-radius: 28rpx;">升级</w-button>
					</view>
					<block v-if="!userHaveCollectionList.length">
						<view @click="goBuuy(item)" v-for="(item,index) in needBuyCollectionList" :key="item.id" class="flex flex-ai-center flex-js-sb mb-24">
							<view class="flex flex-ai-center">
								<w-image :src="item.main_image" :width="98/2" :height="98/2" radius="8"></w-image>
								<view class="flex flex-dir-col ml-12">
									<view class="flex flex-ai-center">
										<view>{{ item.name }}</view>
									</view>
								</view>
							</view>
							<w-button style="height: 56rpx;width: 118rpx;border-radius: 28rpx;font-size: 28rpx;">去购买</w-button>
						</view>
					</block>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup :show="passwordShow" @close="passwordShow = false" mode="center" round="20">
			<view class="password-box flex flex-dir-col flex-ai-center pt-30">
				<w-image src="/static/bg/shengji-password-text.png" mode="widthFix" :width="224/2"></w-image>
				<u-gap height="22"></u-gap>
				<u-code-input v-model="password" borderColor="#D0D0D0" dot focus @finish="confirmUpgrade" :maxlength="6"></u-code-input>
			</view>
		</u-popup>	
		<u-popup :show="resultShow" @close="closeRecord" mode="center" round="20" bgColor="transparent">
			<view class="resultBox flex flex-dir-col flex-ai-center pt-30">
				<view class="text-center font-w-500 font-size-16">升级结果</view>
				<view class="flex-dir-col flex flex-ai-center mt-16">
					<block v-if="shenjiType == 3 && info.rule_hc_result && info.rule_hc_result.length && info.rule_hc_result[0].info">
						<w-image :src="info.rule_hc_result[0].info.main_image" :width="160/2" :height="160/2" style="position: relative;" radius="10"></w-image>
						<view class="mt-16"><text class="font-color-666">恭喜获得：</text> {{ info.rule_hc_result[0].info.name }}</view>
					</block>
					<block v-else>
						<view class="font-size-16 font-color-price">升级失败</view>
					</block>
				</view>			
			</view>
			<view @click="closeRecord" class="mt-16 flex flex-ai-center flex-js-center">
				<w-icon name="close-bg" class="mt-16" size="32"></w-icon>
			</view>
		</u-popup>
		<u-popup :show="ruleShow" @close="ruleShow = false" mode="center" round="20" bgColor="transparent">
			<view class="flex flex-dir-col flex-ai-center pa-16 bg-color-white br-12" style="width: 640rpx;">
				<view class="text-center font-w-500 font-size-16 mb-16">规则</view>
				<scroll-view scroll-y="true" style="height: 60vh;">
					<u-parse :content="info.description"></u-parse>
				</scroll-view>		
			</view>
			<view @click="ruleShow = false" class="mt-16 flex flex-ai-center flex-js-center">
				<w-icon name="close-bg" class="mt-16" size="32"></w-icon>
			</view>
		</u-popup>
	</w-container>
</template>

<script>
	import { playInfo,selectCollection,collectionUpNow } from '@/api/compound/index.js';
	import opacityMixin from '@/mixins/opacityNav.js'
	import SelectMaterials from "./components/SelectCollectPopup"
	export default {
		data() {
			return {
				angle: -90, // 指针角度
				speed: 1, // 秒/圈
				running: false, // 是否旋转
				rafId: null,
				lastTs: null,
				delayAngles: [15, 25, 40], // 多层残影落后角度
				trails: [], // 残影角度状态
				play_id:'',
				collect_id:'',
				loading:true,
				info:{},
				selectShow:false,
				userHaveCollectionList:[],
				needBuyCollectionList:[],
				selectItemInfo:{},
				isOpenAnimation:false,
				shenjiType:1,  //1未开始 2 升级中 3 升级成功 4 升级失败
				passwordShow:false,
				password:'',
				resultShow:false,
				ruleShow:false
			}
		},
		mixins: [opacityMixin],
		computed: {
			pointerStyle() {
				return {
					transform: `translateY(-50%) rotate(${this.angle}deg)`
				}
			}
		},
		mounted() {
			// // 初始化残影角度
			this.trails = this.delayAngles.map(d => (this.angle - d + 360) % 360)
			this.rafId = requestAnimationFrame(this.loop)
		},
		beforeDestroy() {
			// cancelAnimationFrame(this.rafId)
		},
		onLoad({id = '',collect_id = ''}){
			this.play_id = id
			this.collect_id = collect_id
			this.getDataInfo()
		},
		methods: {
			toRecord(){
				uni.navigateTo({
					url:'/pages/upgrade/record'
				})
			},
			closeRecord(){
				this.resultShow = false
				this.shenjiType = 1
				this.selectItemInfo = {}
				this.angle = -90
			},
			async confirmUpgrade(e){			
				let { rule_id,number,collection_ids,collectionList,collectionInfo } = this.info && this.info.rule_text[0]
				let user_json = [
					{
						rule_id,
						collection_ids,
						number,
						user_collection_ids:this.selectItemInfo && this.selectItemInfo.id,
						// first_id:collectionInfo && collectionInfo[0].id
					}
				]
				uni.showLoading({
					title:'升级中...',
					icon:'none',
					mask:true
				})
				const { data,code } = await collectionUpNow({
					classify: "regular",
					grp: "",
					play_id: this.play_id,
					pay_password:e,
					user_json:this.$tools.base64Encode(JSON.stringify(user_json))
				})
				if(code != 1) return
				this.shenjiType = 2
				this.passwordShow = false
				this.toggle()
				if(this.isOpenAnimation) {
					setTimeout(() => {
						this.shenjiType = data.dscj_status == 1 ? 3 : 4
						this.toggle()
						this.resultShow = true
					},5000)
				}else {
					this.shenjiType = data.dscj_status == 1 ? 3 : 4
					this.toggle()
					this.resultShow = true
				}
				
			},
			shenjiShow(){
				if(this.shenjiType == 2) return
				if(!Object.keys(this.selectItemInfo).length) {
					uni.showToast({
						title:'请选择升级藏品',
						icon:'none'
					})				
					return
				}
				this.password = ''
				this.passwordShow = true
				
			},
			goBuuy(item){
				this.selectShow = false
				uni.navigateTo({
					url:`/pages/market/marketGoodsList?id=${item.id}&goodsType=2`
				})
			},
			selectItemCollect(item){
				this.selectShow = false
				this.selectItemInfo = item
			},
			async getDataInfo(){
				const { data,code } = await playInfo({
					classify:"regular",
					grp:"",
					play_id:this.play_id
				})
				if(code != 1) return
				this.info = data
				this.loading = false
			},
			async selectCurrentCollections(){
				uni.showLoading({
					title:'加载中...',
					icon:'none'
				})
				this.userHaveCollectionList = []
				const { data,code } = await selectCollection({
					collection_ids:this.collect_id
				})
				uni.hideLoading()
				if(code != 1) return
				this.userHaveCollectionList = data.userHaveCollectionList
				this.needBuyCollectionList = data.needBuyCollectionList
				this.selectShow = true
			},
			loop(ts) {
				if (!this.lastTs) this.lastTs = ts
				const dt = (ts - this.lastTs) / 1000
				this.lastTs = ts

				const degPerSec = 360 / this.speed

				if (this.running) {
					// 指针旋转
					this.angle = (this.angle + degPerSec * dt) % 360
					// 残影紧跟指针落后
					this.trails = this.delayAngles.map(d => (this.angle - d + 360) % 360)
				} else {
					// 指针暂停，残影快速滑向指针
					this.trails = this.trails.map(trailAngle => {
						const diff = ((this.angle - trailAngle + 360) % 360)
						const step = diff * 0.3 // 控制收尾速度
						return (trailAngle + step) % 360
					})
				}

				this.rafId = requestAnimationFrame(this.loop)
			},
			toggle() {
				this.running = !this.running
				if (this.running) this.lastTs = null
			},
			getTrailStyle(angle) {
				const index = this.trails.indexOf(angle)
				const opacity = [0.4, 0.25, 0.15][index] || 0.1
				const blur = [4, 6, 8][index] || 2
				return {
					transform: `translateY(-50%) rotate(${angle}deg)`,
					opacity,
					filter: `blur(${blur}px)`,
					transition: this.running ? 'none' : 'transform 0.3s linear'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100%;
		@include ossBg('/static/bg/shengji-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.zhuan-out-box {
			width: 750rpx;
			height: 750rpx;
			@include ossBg('/static/bg/shengji-out-bg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			margin-top: 160rpx;
			position: relative;

			.nei-bg {
				width: 441rpx;
				height: 435rpx;
			}
			
			.probability-box {
				width: 100%;
				position: absolute;
				bottom: 0;
				text-align: center;
				font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
				font-weight: 400;
				font-size: 44rpx;
				color: #02F2FF;
				bottom: 280rpx;
			}
			
			.is-open-box {
				position: absolute;
				bottom: 80rpx;
				left: 30rpx;
			}
			
			.shengji-record-btn {
				position: absolute;
				right: 0;
				top: 100rpx;
				width: 60rpx;
				height: 160rpx;
			}
		}
		
		.add-box {
			@include ossBg('/static/bg/shengji-add-bg.png');
			width: 100%;
			height: 386rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			.add-item-bg {
				@include ossBg('/static/bg/shengji-add-item.png');
				width: 176rpx;
				height: 176rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.xuanz-btn {
				width: 136rpx;
				height: 50rpx;
				background: #0767FA;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-family: Source Han Sans CN VF, Source Han Sans CN VF;
				font-weight: 400;
				font-size: 24rpx;
				color: #D6FCFF;
				text-align: center;
				line-height: 50rpx;
				margin-top: 12rpx;
			}
			.yulan-btn {
				width: 136rpx;
				height: 50rpx;
				background: linear-gradient( 90deg, #FFF2CF 0%, #FCF5E2 100%);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-family: Source Han Sans CN VF, Source Han Sans CN VF;
				font-weight: 400;
				font-size: 24rpx;
				color: #582E15;
				text-align: center;
				line-height: 50rpx;
				margin-top: 12rpx;
			}
			.add-right {
				width: 102rpx;
				height: 94rpx;
				margin-top: -94rpx;
			}
		}
	}

	.dial {
		position: relative;
		width: 300px;
		height: 300px;
		border-radius: 50%;
		// background: #111;
		margin: 50px auto;
	}

	/* 中心点 */
	.center {
		position: absolute;
		width: 62rpx;
		height: 62rpx;
		background: linear-gradient(180deg, #C3DEF9 0%, #92B9E0 100%);
		box-shadow: 0rpx 2rpx 2rpx 0rpx rgba(0, 0, 0, 0.25);
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
	}

	/* 主指针 */
	.pointer {
		position: absolute;
		height: 6rpx;
		width: 156rpx;
		background: linear-gradient(180deg, #5AB9FE 0%, #3173E3 100%);
		top: 50%;
		left: 50%;
		transform-origin: 0 50%;
		transform: translateY(-50%) rotate(0deg);
		border-radius: 3px;
		z-index: 5;
	}

	/* 残影指针 */
	.trail {
		position: absolute;
		height: 6rpx;
		width: 156rpx;
		background: linear-gradient(180deg, #5AB9FE 0%, #3173E3 100%);
		top: 50%;
		left: 50%;
		transform-origin: 0 50%;
		transform: translateY(-50%) rotate(0deg);
		border-radius: 3px;
		z-index: 4;
	}

	/* 控件 */
	.controls {
		position: absolute;
		bottom: -60px;
		width: 100%;
		text-align: center;
		color: #fff;
	}

	.controls input {
		width: 60px;
	}

	.controls button {
		margin-left: 10px;
	}
	.password-box {
		width: 538rpx;
		height: 270rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}
	.resultBox {
		width: 538rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 32rpx;
	}
	.empty-btn {
		position: relative;
		.empty-btn-text {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			font-size: 28rpx;
			font-family: Source Han Sans CN VF, Source Han Sans CN VF;
			font-weight: 400;
			color: #fff;
			text-align: center;
			line-height: 100rpx;
		}
	}
</style>